<template>
  <div class="container">
    <el-dialog
      title="题目预览"
      width="60%"
      @open="openDialog"
      @close="closeDialog"
      :visible="dialogVisible"
    >
      <el-header height="90">
        <el-row :gutter="20">
          <el-col :span="6">【题型】：{{ formatQuestionType(Data.questionType) }} </el-col>
          <el-col :span="6">【编号】：{{ Data.id }} </el-col>
          <el-col :span="6">【难度】：{{ formatDifficulty(Data.difficulty) }}</el-col>
          <el-col :span="6">【标签】：{{ Data.remarks }}</el-col>
          <el-col :span="6">【学科】：{{ Data.subjectName }} </el-col>
          <el-col :span="6">【目录】：{{ Data.directoryName }} </el-col>
          <el-col :span="6">【方向】：{{ Data.direction }}</el-col>
        </el-row>
      </el-header>
      <el-main class="border">
        <el-row>
          <el-col :span="24" style="float: right">【题干】：</el-col>
          <br />
          <div style="color: blue" v-html="Data.question"></div>
          <el-col v-if="Data.questionType !== '3'" :span="24">
            {{ formatQuestionType(Data.questionType) }}题 选项：（以下选中的选项为正确答案）
          </el-col>
          <template v-if="Data.questionType === '2'">
            <el-col v-for="item in Data.options" :key="item.id" :span="24">
              <el-checkbox
                v-model="item.isRight"
                :true-label="1"
                :false-label="0"
                onclick="return false"
                >{{ item.title }}</el-checkbox
              >
            </el-col>
          </template>
          <template v-else-if="Data.questionType === '1'">
            <el-col :span="24">
              <el-radio-group v-model="radio">
                <div v-for="item in Data.options" :key="item.id">
                  <el-radio :label="item.isRight" onclick="return false">{{ item.title }}</el-radio>
                </div>
              </el-radio-group>
            </el-col>
          </template>
        </el-row>
      </el-main>
      <div class="video-box">
        【参考答案】：<el-button size="small" type="danger" @click="video">视频答案解析</el-button>
        <template v-if="Data.videoURL">
          <div id="video" style="display: none">
            <video
              src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-learning-vue/52e63a10-aecd-11ea-b43d-2358b31b6ce6.mp4"
              controls
            ></video>
          </div>
        </template>
      </div>
      <el-footer class="border divFooter">
        【答案解析】：
        <div style="display: inline-block" v-html="Data.answer || '无'"></div>
      </el-footer>
      <el-footer> 【题目备注】：{{ Data.remarks || '无' }} </el-footer>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="closeDialog">关 闭</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { detail } from '@/api/hmmm/questions.js'

export default {
  props: {
    dialogVisible: {
      type: Boolean
    },
    row: {
      type: Object
    }
  },

  data() {
    return {
      name: 'QuestionsPreview',

      Data: {},

      radio: 1
    }
  },

  methods: {
    closeDialog() {
      this.$emit('close-dialog')
      if (this.Data.videoURL) {
        const boxvideo = document.querySelector('#video')
        boxvideo.style.display = 'none'
        const video = document.querySelector('video')
        video.pause()
        video.currentTime = 0
      }
    },

    async openDialog() {
      const res = await detail(this.row)
      // console.log(res.data)
      this.Data = res.data
    },

    // 表格题型格式化
    formatQuestionType(type) {
      // console.log(questionType)
      // console.log(type)
      const map = {
        1: '单选',
        2: '多选',
        3: '简答'
      }
      return map[type]
    },

    // 难度格式化
    formatDifficulty(type) {
      const map = {
        1: '简单',
        2: '一般',
        3: '困难'
      }
      return map[type]
    },

    video() {
      if (this.Data.videoURL) {
        const video = document.querySelector('#video')
        video.style.display = 'block'
      }
    }
  }
}
</script>

<style scoped lang="less">
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}

.el-col {
  margin-bottom: 10px;
}

.border {
  border-top: 1px solid #000;
  border-bottom: 1px solid #000;
}

.el-main {
  padding-top: 10px;
  padding-bottom: 0px;
}

.el-footer {
  line-height: 60px;
  min-height: 60px;
}

.divFooter {
  line-height: 30px;
}

#video {
  width: 400px;
  height: 300px;
}

video {
  width: 100%;
  height: 100%;
}

.video-box {
  // position: relative;
  margin: 20px;
}

.el-radio-group div {
  margin-bottom: 20px;
}

.dialog-footer {
  text-align: right;
}
</style>
